<template>
  <div class="statisticDialogContainer" v-if="isStatisticDialogShow" v-drag>
    <div class="statisticDialogTitle drag-handle">
      <div class="title-left">
        <div class="bar"></div>
        <div class="title-text">管网设备统计</div>
      </div>
      <div class="title-right">
        <!-- <div  tabindex="0" class="icon">-</div> -->
        <div tabindex="0" class="icon" @click="closeDialog">×</div>
      </div>
    </div>
    <div class="statisticDialogContent">
      <div class="contentButton">
        <div
          class="menuButton"
          :class="{ active: isNormalShow }"
          @click="changeMenu('normal')"
        >
          常规统计
        </div>
        <div
          class="menuButton"
          :class="{ active: isAdvancedShow }"
          @click="changeMenu('advanced')"
        >
          高级统计
        </div>
      </div>
      <div
        v-if="isNormalShow"
        style="
          width: 100%;
          height: 30px;
          background-color: #4070a2;
          font-size: 16px;
          color: white;
          line-height: 30px;
        "
      >
        统计条件设定
      </div>
      <div v-if="isNormalShow" style="display: flex; justify-content: center">
        <div class="conditionContent" style="width: 100%; margin-top: 10px">
          <div
            class="conditionContent-type"
            style="
              display: flex;
              margin: 0 auto;
              justify-content: center;
              align-items: center;
            "
          >
            <div style="width: 60px; font-weight: bold">类别</div>
            <div style="display: flex">
              <div
                style="
                  width: 120px;
                  height: 25px;
                  line-height: 25px;
                  background-color: #c4c6c8;
                  color: black;
                  border-radius: 3px;
                  text-align: center;
                "
                id="Tab-Line"
                @click="selectLine"
              >
                管线
              </div>
              <div
                style="
                  width: 120px;
                  height: 25px;
                  margin-left: -3px;
                  line-height: 25px;
                  background-color: #fff;
                  color: black;
                  border-radius: 3px;
                  text-align: center;
                "
                id="Tab-Equipment"
                @click="selectEquipment"
              >
                设备设施
              </div>
            </div>
          </div>
          <div
            class="conditionContent-area"
            style="
              width: 100%;
              display: flex;
              margin-top: 10px;
              justify-content: center;
              align-items: center;
            "
          >
            <!-- <div class="label" style="width: 60px; font-weight: bold">区域</div>
            <div>
              <select
                v-model="targetAreaOption"
                @change="targetAreaSelect"
                style="width: 240px"
              >
                <option value="allArea">全部</option>
              </select>
            </div> -->
          </div>
        </div>
      </div>

      <div v-if="isNormalShow">
        <div></div>
      </div>
      <div
        v-if="isNormalShow"
        style="
          width: 100%;
          height: 30px;
          background-color: #4070a2;
          font-size: 16px;
          color: white;
          line-height: 30px;
        "
      >
        统计结果
      </div>
      <div
        v-if="isNormalShow"
        style="width: 100%; height: 260px; margin-top: 10px"
      >
        <el-table
          :data="tableData"
          id="dataTable1"
          border
          style="width: 100%; overflow: auto"
          height="250"
        >
          <el-table-column prop="cnname" label="类别">
            <template slot-scope="scope">
              <img
                style="max-height: 2.5vh; margin-right: 0.5rem; max-width: 2vw"
                :src="'http://' + scope.row.legend"
              />
              {{ scope.row.cnname }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="this.type == 'Equipment'"
            prop="equipmentNum"
            label="总数量(个)"
          ></el-table-column>
          <el-table-column
            v-if="this.type == 'Line'"
            prop="totalLength"
            label="总长度(公里)"
          ></el-table-column>
        </el-table>

        <!-- <div class="count-result-title" style="width: 100%; height: 33px; background-color: #fff; display: flex;">
                    <div style="width: 50%; height: 100%; color: black; font-weight: bolder; background-color: #E7E9EA; border: 1px solid #7E7F81; padding-left: 5px; line-height: 33px;" >类别</div>
                    <div style="width: 50%; height: 100%; color: black; font-weight: bolder; background-color: #E7E9EA; border: 1px solid #7E7F81; padding-left: 5px; line-height: 33px">总数量(个)</div>
                </div>
                <div class="count-result-content">

                </div> -->
      </div>
      <div v-if="isNormalShow" class="bottom-button" style="margin-left: 12rem">
        <el-button
          size="mini"
          icon="el-icon-s-data"
          @click="openStatisicDialog"
        >
          统计
        </el-button>
        <el-button size="mini" icon="el-icon-folder-opened" @click="exportForm1"
          >导出</el-button
        >
      </div>
      <!-- 高级统计界面 -->

      <div
        v-if="isAdvancedShow"
        style="
          width: 100%;
          height: 30px;
          background-color: #4070a2;
          font-size: 16px;
          color: white;
          line-height: 30px;
          display: flex;
          justify-content: space-between;
        "
      >
        <div>统计模板选择</div>
        <div>
          <!-- <el-checkbox v-model="isShowAll">显示全部</el-checkbox> -->
        </div>
      </div>
      <div
        v-if="isAdvancedShow"
        class="conditionContent-area"
        style="
          width: 100%;
          display: flex;
          margin-top: 10px;
          justify-content: center;
        "
      >
        <div style="margin-top: -7px; margin-bottom: 3px">
          <select
            v-model="templateConditionsId"
            @change="templateSearchById"
            style="width: 340px"
          >
            <option :value="item" v-for="(item, index) in templateGroup">
              {{ item.queryTemplateName }}
            </option>
          </select>
        </div>
      </div>

      <div
        v-if="isAdvancedShow"
        style="
          width: 100%;
          height: 30px;
          background-color: #4070a2;
          font-size: 16px;
          color: white;
          line-height: 30px;
          display: flex;
          justify-content: space-between;
        "
      >
        <div>统计模板结果</div>
      </div>
      <div
        v-if="isAdvancedShow"
        style="width: 100%; height: 260px; margin-top: 10px"
      >
        <el-table
          id="dataTable2"
          :data="tableData"
          border
          style="width: 100%; max-height: 88%; overflow: auto"
          height="250"
        >
          <el-table-column prop="cnname" label="类别"></el-table-column>
          <el-table-column
            prop="equipmentNum"
            label="总数量(个)/总长度(公里)"
          ></el-table-column>
        </el-table>
        <!-- <div class="tablePage">
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page="pageinfoItem.currentPage"
                        :pager-count="3"
                        :page-size="pageinfoItem.pageSize"
                        :total="pageinfoItem.totalItems"
                        layout="total, prev, pager, next, jumper"
                    ></el-pagination>
                </div> -->

        <!-- <div class="count-result-title" style="width: 100%; height: 33px; background-color: #fff; display: flex;">
                    <div style="width: 50%; height: 100%; color: black; font-weight: bolder; background-color: #E7E9EA; border: 1px solid #7E7F81; padding-left: 5px; line-height: 33px;" >类别</div>
                    <div style="width: 50%; height: 100%; color: black; font-weight: bolder; background-color: #E7E9EA; border: 1px solid #7E7F81; padding-left: 5px; line-height: 33px">总数量(个)</div>
                </div>
                <div class="count-result-content">

                </div> -->
      </div>
      <div
        v-if="isAdvancedShow"
        class="bottom-button"
        style="display: flex; justify-content: flex-end"
      >
        <el-button
          size="mini"
          icon="el-icon-circle-plus-outline"
          @click="openAddDialog"
        >
          新增
        </el-button>
        <el-button
          size="mini"
          icon="el-icon-circle-plus-outline"
          @click="deleteTemplate"
        >
          删除
        </el-button>
        <el-button
          size="mini"
          icon="el-icon-s-data"
          @click="openStatisicDialog"
        >
          统计
        </el-button>
        <el-button size="mini" icon="el-icon-folder-opened" @click="exportForm2"
          >导出</el-button
        >
        <el-button
          size="mini"
          icon="el-icon-folder-opened"
          @click="refreshTemplate"
          >刷新</el-button
        >
      </div>
    </div>
    <div class="advanceGuideDialog" v-if="isAddDialog" v-drag>
      <div class="title drag-handle">
        <span>高级统计汇总向导</span>
        <div tabindex="0" class="icon" @click="advGuideStep('cancel')">×</div>
      </div>
      <div class="content">
        <div class="stage1" v-show="advGuideStage == 1">
          <span class="stageTitle">是否自定义统计区域：</span>
          <el-radio v-model="selfCalArea" label="0">无</el-radio>
          <el-radio v-model="selfCalArea" label="1">自定义统计区域</el-radio>
          <div
            class="featureChoose"
            :style="{
              pointerEvents: selfCalArea == '0' ? 'none' : 'auto',
              background: selfCalArea == '0' ? '#ccc' : 'none',
            }"
          >
            <div class="item" @click="drawOperate('circle')">
              <img :src="featureImg.circle" alt="" />
            </div>
            <div class="item" @click="drawOperate('rectangle')">
              <img :src="featureImg.rectangle" alt="" />
            </div>
            <div class="item" @click="drawOperate('multiPolygon')">
              <img :src="featureImg.multiPolygon" alt="" />
            </div>
            <div class="item" @click="drawOperate('clean')">
              <img :src="featureImg.clean" alt="" />
            </div>
          </div>
        </div>
        <div class="stage2" v-show="advGuideStage == 2">
          <span class="stageTitle">选择统计对象(如需条件可自定义):</span>
          <Treeselect
            placeholder="选择查询表"
            :options="conditionQueryTableList"
            appendToBody
            z-index="9999"
            :normalizer="normalizer"
            noOptionsText="没有数据"
            noResultsText="没有搜索结果"
            @select="(node) => handleInputChange(node)"
          ></Treeselect>
          <div class="condition">
            <select
              v-model="targetQueryCondition.attribute"
              @change="targetSelect"
              style="width: 25%"
            >
              <option
                v-for="item in this.conditionQueryAttributeList"
                :value="item"
              >
                {{ item.queryName }}
              </option>
            </select>
            <select v-model="targetQueryCondition.operator" style="width: 20%">
              <option
                :value="item"
                v-for="(item, index) in targetCompareOption"
              >
                {{ item.queryName }}
              </option>
            </select>
            <div style="display: flex; width: 50%">
              <input
                v-model="targetQueryCondition.value.queryValue"
                v-show="isValueInputShow"
                style="width: 75%"
              />
              <el-date-picker
                style="width: 75%"
                v-model="targetQueryCondition.value.queryValue"
                type="datetime"
                v-show="isValueTimeShow"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
              <div
                @click="addCondition"
                style="
                  border-radius: 50%;
                  background-color: #4070a2;
                  width: 1.5rem;
                  height: 1.5rem;
                  margin-left: 0.5rem;
                  cursor: pointer;
                "
                title="添加条件"
              >
                <img
                  style="height: 1.5rem"
                  src="../../../assets/向下箭头.png"
                  alt=""
                />
              </div>
            </div>
          </div>
          <div class="conditionSelect">
            <div class="item" v-for="(item, index) in conditionQueryGroupList">
              <div style="">
                <select
                  v-if="index > 0"
                  v-model="item.connector.queryValue"
                  style="width: 40px"
                >
                  <option value="AND">且</option>
                  <option value="OR">或</option>
                </select>
                <span>{{ item.queryTableValue.queryName }}:</span>
                <span>{{ item.attribute.queryName }}</span>
                <span>{{ item.operator.queryName }}</span>
                <span>{{ item.value.queryValue }}</span>
              </div>
              <button
                style="
                  width: 4rem;
                  background: transparent;
                  border: 1px solid #ccc;
                  border-radius: 2px;
                  cursor: pointer;
                "
                @click="delConditionItem(index)"
              >
                删除
              </button>
            </div>
          </div>
        </div>
        <div class="stage3" v-show="advGuideStage == 3">
          <span class="stageTitle">统计指标字段:</span>
          <select v-model="calOnlyType" style="width: 80%">
            <option
              v-for="item in this.conditionQueryAttributeList"
              :value="item"
            >
              {{ item.queryName }}
            </option>
          </select>
          <label style="margin-left: 20px" v-show="isShowGroupByRange">
            <input type="checkbox" v-model="isGroupByRange" />
            按区间统计
          </label>
          <div class="tipContent">
            <span>
              在上面下拉列表中选择统计汇总的字段，尽量选择可内容不为空的字段，否则可能会影响查询结果。
            </span>
            <div class="box" v-show="isGroupByRange">
              <div class="row">
                <label class="label">添加分级：</label>
                <input type="text" class="input-box" v-model="newItem" />
                <button class="add-button" @click="addItem">+</button>
              </div>
              <!-- 第二行 -->
              <div class="row">
                <label class="label">统计区间：</label>
                <div class="content-box">
                  <div
                    v-for="(item, index) in items"
                    :key="index"
                    class="content-item"
                  >
                    <span>{{ item }}</span>
                    <button class="remove-button" @click="removeItem(index)">
                      -
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="stage4" v-show="advGuideStage == 4">
          <el-table
            id="dataTable"
            :data="advTableData"
            v-loading="tableLoading"
            border
            style="width: 100%; max-height: 100%; overflow: auto"
          >
            <!-- <el-table-column prop="keywords" label="关键字"></el-table-column> -->
            <el-table-column prop="cnname" label="类别"></el-table-column>
            <el-table-column
              prop="equipmentNum"
              label="总数量(个)/总长度(公里)"
            ></el-table-column>
          </el-table>
          <!-- <el-pagination
                        @current-change="handleAdvCurrentChange"
                        :current-page="advPageinfoItem.currentPage"
                        :pager-count="3"
                        :page-size="advPageinfoItem.pageSize"
                        :total="advPageinfoItem.totalItems"
                        layout="total, prev, pager, next, jumper"
                    ></el-pagination> -->
        </div>
        <div class="btnGroup">
          <button v-show="advGuideStage > 1" @click="advGuideStep('del')">
            上一步
          </button>
          <button v-show="advGuideStage < 3" @click="advGuideStep('add')">
            下一步
          </button>
          <button v-show="advGuideStage == 3" @click="advGuideStep('finish')">
            完成
          </button>
          <button v-show="advGuideStage == 4" @click="exportForm">导出</button>
          <button v-show="advGuideStage == 4" @click="advGuideStep('save')">
            保存
          </button>
          <button v-show="advGuideStage == 4" @click="advGuideStep('cancel')">
            关闭
          </button>
          <button
            v-show="advGuideStage > 0 && advGuideStage < 4"
            @click="advGuideStep('cancel')"
          >
            取消
          </button>
        </div>
      </div>
    </div>
    <div class="setTemplateData" v-if="showSetTemplateData" v-drag>
      <span>请输入要保存的查询模板名称：</span>
      <input type="text" v-model="templateData.name" />
      <span>请输入要保存的查询模板备注：</span>
      <input type="text" v-model="templateData.note" />
      <div class="btnGroup">
        <button @click="saveTemplate">保存</button>
        <button @click="showSetTemplateData = false">取消</button>
      </div>
    </div>
    <el-dialog
      title="管网设备统计图表"
      :modal="false"
      :visible.sync="dialogStatisicVisible"
    >
      <EChartsVue :chart-data="chartData"></EChartsVue>
    </el-dialog>
  </div>
</template>

<script>
import dmgis from "@/api/dmgis";
import * as XLSX from "xlsx";
import * as FileSaver from "file-saver";
import EChartsVue from "../../UtilView/ECharts.vue";
import ImageLayer from "ol/layer/Image";
import {
  getStasiticResult,
  getEquipStatistics,
  deleteConditionTemplate,
  getConditionQueryList,
  saveStatisticTemplate,
  getConditionTemplateList,
  searchConditonQueryTemplate,
  getallListTemplate,
  getStatisticListTemplate,
  getResultByTemplate,
  getChineseByEnglish,
  getConditionAttributeList,
  getStaticResult,
  metricFields,
  getStaticResultExcel,
  getTemplateParam,
  getResultByStatisticTemplate,
} from "../../../api/EquipmentManagement";
export default {
  name: "equipStatistic",
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
  },
  components: {
    EChartsVue,
  },
  data() {
    return {
      newItem: "", // 用于存储输入框中的内容
      items: [], // 用于存储动态添加的内容
      isGroupByRange: false,
      isShowGroupByRange: false,
      pageinfoItem: {
        totalItems: 0,
        currentPage: 1,
        pageSize: 100,
      },
      advPageinfoItem: {
        totalItems: 0,
        currentPage: 1,
        pageSize: 100,
      },
      conditionTemplateTableData: [],
      templateGroup: [],
      templateConditionsId: {},
      templateData: {
        name: "",
        note: "",
      },
      showSetTemplateData: false,
      querySpatialLayer: null,
      projectLayer: null,
      keywords: [],
      advTableData: [],
      tableLoading: false,
      calOnlyType: "",
      themicTemplateData: {
        name: "",
        note: "",
      },
      conditionQueryGroupList: [],
      conditionQueryTableList: [],
      conditionQueryAttributeList: [],
      targetQueryCondition: {
        queryTableValue: {
          queryName: "",
          queryValue: "",
        },
        attribute: {
          queryName: "",
          queryValue: "",
        },
        operator: {
          queryName: "",
          queryValue: "",
        },
        value: {
          queryName: "",
          queryValue: "",
        },
        connector: {
          queryName: "且",
          queryValue: "AND",
        },
      },
      isValueTimeShow: false,
      isValueInputShow: true,
      targetCompareOption: [
        { queryName: "大于", queryValue: ">" },
        { queryName: "小于", queryValue: "<" },
        { queryName: "等于", queryValue: "=" },
        { queryName: "大于等于", queryValue: ">=" },
        { queryName: "小于等于", queryValue: "<=" },
      ],
      geomData: null,
      featureDrawType: "",
      isShowAll: true,
      targetOption: [],
      featureImg: {
        circle: require("@/assets/圆.png"),
        rectangle: require("@/assets/矩形.png"),
        multiPolygon: require("@/assets/多边形.png"),
        clean: require("@/assets/垃圾桶.png"),
      },
      advGuideStage: 1,
      // advGuideStage: {
      //   stage1: true,
      //   stage2: true,
      //   stage3: true,
      //   stage4: true,
      // },
      selfCalArea: "0",
      isAddDialog: false,
      isShowAddNew: false,
      chartData: {
        xAxisData: [],
        seriesData: [],
      },
      processData: null,
      isDetailDialogShow: false,
      areaMarkText: "",
      adviceNoteText: "",

      isNormalShow: true,
      isAdvancedShow: false,
      targetAreaOption: "allArea",
      contentOption: "",
      suggestTargetList: [],
      targetContentList: [],
      polygonLayer: null,
      map: null,
      searchKeyWords: "",
      selectedCoordinates: {
        lon: "", // 初始化为空字符串或你想要的默认值
        lat: "", // 初始化为空字符串或你想要的默认值
      },
      allAdviceTableData: [],
      conditonQueryData: [],
      ProcessedAdviceTableData: [],
      UnProcessedAdviceTableData: [],
      adviceTableData: [
        { item: "列1的内容1" },
        { item: "列1的内容2" },
        { item: "列1的内容3" },
      ],
      isPipeLineShow: false,
      //属性纠错列表两列的值
      array1: ["列1的内容1", "列1的内容2", "列1的内容3"], // 第一个数组
      array2: ["列2的内容1", "列2的内容2", "列2的内容3"], // 第二个数组
      conditionType: "",
      conditionArea: "",
      tableData: [],
      dmProjGroup: [],
      dmserurl: process.env.VUE_APP_BASE_API + "/dmgis",
      tableDataExport: [],
      dialogStatisicVisible: false,
      type: "Line",
    };
  },
  computed: {
    getArea() {
      return this.$store.state.area;
    },
    isStatisticDialogShow() {
      // 返回 prop 的值
      return this.dialogVisible;
    },
    getGeom() {
      return this.$store.state.geom;
    },
  },
  watch: {
    getArea(newVal) {
      this.areaData = newVal;
      this.areaText = JSON.stringify(this.areaData.getCoordinates()[0]);
      console.log(this.areaText, "areaText");
    },
    selfCalArea(newVal) {
      if (newVal == "0") {
        this.geomData = null;
        this.map.interaction.cancelYjDraw();
      }
    },
    calOnlyType(newValue, oldValue) {
      console.log(newValue, "选择的指标");
      if (newValue.queryName == "管网口径") {
        this.isShowGroupByRange = true;
      }
    },

    getGeom(newVal) {
      // this.geomData = newVal;
      this.areaMarkText = JSON.stringify(this.geomData.getCoordinates());
      // ) ,geomSum,'获取到的geom');
    },
    processData(newValue) {
      if (newValue == "未处理") {
        this.adviceTableData = this.UnProcessedAdviceTableData;
      } else if (newValue == "已处理") {
        this.adviceTableData = this.ProcessedAdviceTableData;
      }
    },
  },
  beforeDestroy() {
    this.clear();
  },
  methods: {
    exportForm1() {
      if (this.tableData.length == 0) {
        this.$message.warning("暂无可导出的数据!");
        return;
      }
      let tables = document.getElementById("dataTable1").cloneNode(true);
      let table_book = XLSX.utils.table_to_book(tables);
      let table_write = XLSX.write(table_book, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([table_write], { type: "application/octet-stream" }),
          `管网设备统计表.xlsx`
        );
      } catch (e) {
        if (typeof console !== "undefined");
      }
    },
    exportForm2() {
      if (this.tableData.length == 0) {
        this.$message.warning("暂无可导出的数据!");
        return;
      }
      let tables = document.getElementById("dataTable2").cloneNode(true);
      let table_book = XLSX.utils.table_to_book(tables);
      let table_write = XLSX.write(table_book, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([table_write], { type: "application/octet-stream" }),
          `管网设备统计表.xlsx`
        );
      } catch (e) {
        if (typeof console !== "undefined");
      }
    },
    clear() {
      this.map.map
        .getLayers()
        .getArray()
        .forEach((layer) => {
          if (
            layer.get("layerName") == "高级统计结果图" ||
            layer.get("name") == "高级统计结果图"
          ) {
            console.log("找到高级统计结果图层");
            this.map.map.removeLayer(layer);
          }
        });
    },
    getTemplateParam() {
      let params = {
        conditions: [],
        featureTemplateName: this.themicTemplateData.name,
        featureTemplateRemark: this.themicTemplateData.note,
        range: this.areaText,
      };
      params.conditions = this.conditionQueryGroupList.map((item, index) => {
        if (index == 0) {
          item.connector.queryValue = "";
        }
        return {
          tableName: item.queryTableValue.queryValue,
          attribute: item.attribute.queryValue,
          operator: item.operator.queryValue,
          value: Number(item.value.queryValue),
          connector: item.connector.queryValue,
        };
      });

      getTemplateParam(params).then((res) => {
        if (res.code == 200) {
          console.log(params, "params02.05保存专题图参数");
          console.log(res, "res.data02.05获取专题图参数");
          let item = res.data;
          this.TemplateParams = {
            layername: item.id,
            range: item.range,
            conditions: item.queryConditionValue,
            tableName: item.queryTableName,
            isDelAccess: true,
            color: item.color,
            size: "20",
          };
          this.clear();
          this.addDmProject(this.TemplateParams);
        }
      });
    },
    async exportForm() {
      console.log("导出数据");
      if (this.tableDataExport.length === 0) {
        this.$message.warning("暂无可导出的数据!");
        return;
      }

      let wb = XLSX.utils.book_new();
      console.log(this.tableDataExport, "this.resultDataTemp");

      // 获取所有键名（表头）
      let keyGroup = Object.keys(this.tableDataExport[0]);
      let arrayTemp = [];

      // 将键名（表头）转换为中文
      let res = await getChineseByEnglish(keyGroup);
      if (!res || !res.data) {
        console.error("getChineseByEnglish returned invalid data:", res);
        return;
      }

      let headerRow = [];
      for (let key in res.data) {
        headerRow.push(res.data[key]);
      }
      arrayTemp.push(headerRow);

      // 遍历表格数据
      for (const item of this.tableDataExport) {
        let row = [];
        for (let key in item) {
          row.push(item[key]);
        }
        arrayTemp.push(row);
      }

      // 创建工作表
      let ws = XLSX.utils.aoa_to_sheet(arrayTemp);
      XLSX.utils.book_append_sheet(wb, ws, "高级统计数据表");

      // 保存文件
      XLSX.writeFile(wb, "高级统计数据表.xlsx");
    },
    addItem() {
      if (this.newItem.trim()) {
        this.items.push(this.newItem.trim()); // 将输入的内容添加到列表中
        this.newItem = ""; // 清空输入框
      }
    },
    removeItem(index) {
      this.items.splice(index, 1); // 根据索引移除列表中的内容
    },

    handleCurrentChange(page) {
      this.pageinfoItem.currentPage = page;
      this.tableData = [];
      let params = this.templateConditionsId;
      this.tableLoading = true;
      getResultByTemplate({
        templateId: params,
        pageNum: this.pageinfoItem.currentPage,
        pageSize: 100,
      }).then((res) => {
        this.tableData = res.data.map((item) => {
          let keywords = item.keywords?.trim().split(" ") || [];
          let cnname = item.accessoryMaterial?.trim().split(" ") || [];
          let value =
            item.diameter?.trim().split(" ") ||
            item.pipeDiameter?.trim().split(" ") ||
            [];

          return { keywords, cnname, value };
        });
        this.tableLoading = false;
        this.pageinfoItem.totalItems = res.total;
      });
    },
    handleAdvCurrentChange(page) {
      // if (this.selfCalArea == "1") {
      // } else {
      // }
      // this.advPageinfoItem.currentPage = page;
      // this.tableData = [];
      // let params = this.templateConditionsId;
      // this.tableLoading = true;
      // getResultByTemplate({
      //   templateId: params,
      //   pageNum: this.advPageinfoItem.currentPage,
      //   pageSize: 100,
      // }).then((res) => {
      //   this.$message.success("查询成功");
      //   this.tableData = res.data;
      //   this.tableLoading = false;
      // });
    },
    async templateSearchById() {
      this.tableData=[];
      console.log(this.templateConditionsId, "this.templateConditionsId");

      getResultByStatisticTemplate({ id: this.templateConditionsId.id }).then(
        (res) => {
          if (res.code == 200) {
            this.$message.success("查询成功");
            console.log("res.data[0].lineDiameter", res.data[0].lineDiameter);
            if ("lineDiameter" in res.data[0]) {
              console.log("res.data[0].lineDiameter1");
              this.tableData = res.data.map((item) => ({
                cnname: item.lineDiameter,
                equipmentNum: item.lineLen.toFixed(3),
              }));
            } else {
              console.log("res.data[0].lineDiameter2");
              this.tableData = res.data.map((item) => ({
                cnname: item.equipName,
                equipmentNum: item.equipNum,
              }));
            }
          }
        }
      );

      // metricFields(params).then((res) => {
      //   if (res.code == 200) {
      //     this.$message.success("数据获取成功");
      //     if (params.field == "len") {
      //       this.tableData = [
      //         {
      //           cnname: "管线总长",
      //           equipmentNum: (res.data / 1000).toFixed(3),
      //         },
      //       ];
      //     } else {
      //       this.tableData = Object.keys(res.data).map((key) => {
      //         return {
      //           cnname: key, // 类别列
      //           equipmentNum: res.data[key], // 数量列
      //         };
      //       });
      //     }
      //   }
      //   this.tableLoading = false;
      // });
      // this.tableData.forEach((item) => {
      //       this.chartData.xAxisData.push(item.cnname);
      //       this.chartData.seriesData.push(
      //         item.totalLength || parseFloat(item.equipmentNum).toFixed(2)
      //       );
      //     });
    },
    delConditionItem(index) {
      this.conditionQueryGroupList.splice(index, 1);
    },
    addCondition() {
      if (
        this.targetQueryCondition.queryTableValue.queryName == "" ||
        this.targetQueryCondition.attribute.queryName == "" ||
        !this.targetQueryCondition.operator
      ) {
        this.$message.warning("请选择查询条件");
        return;
      }
      let newCondition = JSON.parse(JSON.stringify(this.targetQueryCondition));
      this.conditionQueryGroupList.push(newCondition);

      //   this.conditionQueryGroupList.push({
      //     queryTableValue: this.targetQueryTable,
      //     attribute: this.targetQueryAtrribute,
      //     operator: this.targetOption,
      //     value: this.inputValue,
      //     connector: "AND",
      //   });
    },
    normalizer(node) {
      return {
        id: node.id,
        label: node.label,
        value: node.value,
        children: node.children && node.children.length > 0 ? node.children : 0,
      };
    },
    targetSelect() {
      this.targetQueryCondition.operator = { queryName: "", queryValue: "" };
      this.targetQueryCondition.value.queryValue = "";
      this.targetCompareOption =
        this.targetQueryCondition.attribute.options.map((item) => {
          if (
            this.targetQueryCondition.attribute.queryName.includes("时间") ||
            this.targetQueryCondition.attribute.queryName.includes("日期")
          ) {
            this.isValueInputShow = false;
            this.isValueTimeShow = true;
          } else if (item.visible == "true") {
            this.isValueInputShow = true;
            this.isValueTimeShow = false;
          } else {
            this.isValueInputShow = false;
            this.isValueTimeShow = false;
          }
          return {
            queryName: item.label,
            queryValue: item.value,
          };
        });
    },
    handleInputChange(newValue) {
      if (newValue.label == "管线属性表") {
        this.isPipeLineShow = true;
      }
      this.conditionQueryGroupList = [];
      this.targetQueryCondition.value.queryValue = "";
      this.targetQueryCondition.queryTableValue = {
        queryName: newValue.label,
        queryValue: newValue.value,
      };
      this.targetQueryCondition.attribute = "";
      this.conditionQueryAttributeList = [];
      this.targetCompareOption = [];
      getConditionAttributeList({ id: newValue.id }).then((res) => {
        this.conditionQueryAttributeList = res.data.map((item) => {
          return {
            queryName: item.attributeName,
            queryValue: item.attributeValue,
            options: item.options,
          };
        });
      });
    },
    //添加工程地图
    addDmProject(val) {
      val.layername = "高级统计结果图";
      console.log("高级统计取图的参数", val);

      let dmProjectLayer = new dmgis.olmap.ServiceLayer(
        "TapWaterMap",
        this.dmserurl,
        {
          maxZoom: 18,
          minZoom: 0,
          opacity: 1,
          tileSize: [256, 256],
        }
      );
      //创建点线面时回调
      dmgis.olmap.ServiceLayer.prototype.HandleBuildInfo = function (feature) {
        this.currentindex = feature.index;
      };
      setTimeout(() => {
        dmProjectLayer.serviceLayer = new ImageLayer({
          zIndex: 4,
          name: val.layername,
        });
        this.map.map.addLayer(dmProjectLayer.serviceLayer);
        let querydmParams = new dmgis.object.SpatialConditionQuery();
        let serviceLayer = dmProjectLayer.serviceLayer;
        dmProjectLayer.serviceLayer.setVisible(true);
        querydmParams.polygonStr = "";
        if (!val.range) val.range = "";
        if (val.range !== "") {
          JSON.parse(val.range).forEach((item, index) => {
            let itemGroup = item.join(" ");
            if (index == JSON.parse(val.range).length - 1) {
              querydmParams.polygonStr += itemGroup;
            } else {
              querydmParams.polygonStr += itemGroup + ";";
            }
          });
        }
        let nowExtent = this.map.map.getView().calculateExtent();
        querydmParams.DispRect.minx = nowExtent[0];
        querydmParams.DispRect.miny = nowExtent[1];
        querydmParams.DispRect.maxx = nowExtent[2];
        querydmParams.DispRect.maxy = nowExtent[3];
        var conditions = val.conditions.replace(/</g, "&lt;");

        // 将转义后的字符串赋值给 querydmParams.conditionsList
        querydmParams.conditionsList = conditions;
        console.log(
          querydmParams.conditionsList,
          "条件查询获取的条件参数@@@@@@@@@@@@@@@@@@@@@@@@@@"
        );
        querydmParams.color = val.color;
        querydmParams.layers = val.tableName.split(",").map((item) => {
          return item.split("_", 2)[0] + "_" + item.split("_", 2)[1];
        });
        querydmParams.size = val.size.toUpperCase().replace(/\s+/g, "");
        console.log(serviceLayer, querydmParams, "传入refreshMap的两个参数");
        dmProjectLayer.RefreshMap(serviceLayer, querydmParams, 10);
        let watcher = (e) => {
          this.getMapRefresh(e, dmProjectLayer);
        };
        this.dmProjGroup.push({
          layername: val.layername,
          layer: dmProjectLayer,
          watcher: watcher,
        });
        this.map.map.on("moveend", watcher);
      }, 100);
    },
    async getFeatureByAreaNew() {
      console.log("getFeatureByAreaNew");
      await this.getFeatureByArea1();
    },
    async getFeatureByArea1() {
      console.log("getFeatureByArea1");
      let resultData = [];
      let getFeatureParams = new dmgis.object.FeatureServiceParam(
        "TapWaterMap"
      );
      let SpatialQuery = new dmgis.object.SpatialQuery();
      let areaPos = "";
      if (!this.geomData) this.geomData = [];
      this.geomData.forEach((item, index) => {
        let itemGroup = item.join(" ");
        if (index == this.geomData.length - 1) {
          areaPos += itemGroup;
        } else {
          areaPos += itemGroup + ";";
        }
      });
      SpatialQuery.strPos = areaPos;
      getFeatureParams.sql = SpatialQuery;
      let layersAttribute = [];

      this.$store.state.layersAttribute.forEach((item) => {
        if (
          item
            .toLowerCase()
            .includes(
              this.targetQueryCondition.queryTableValue.queryValue.toLowerCase()
            )
        ) {
          layersAttribute.push(item);
        }
      });
      if (layersAttribute.length == 0) {
        this.$message.warning("请先获取服务图层");
        return;
      }
      let requestNum = 0;
      requestNum = layersAttribute.length;
      async function getFeatureByAreaSon() {
        for (let item of layersAttribute) {
          getFeatureParams.strlayername = item;
          try {
            await this.projectLayer
              .SendFeatureMapService(getFeatureParams)
              .then((res) => {
                if (res.objset) {
                  let dataObjectgroup = [];
                  res.objset.map((item) => {
                    let dataObject = {};
                    item.rec.forEach((data) => {
                      dataObject[data.fldname] = data.fldval;
                    });
                    dataObjectgroup.push(dataObject);
                  });
                  resultData.push({
                    layername: getFeatureParams.strlayername,
                    data: dataObjectgroup,
                  });
                }
                // dmgis.olmap.ServiceLayer.prototype.HandleFeatureInfo =
                //   function (feature) {
                //     if (feature.objset) {
                //       let dataObjectgroup = [];
                //       feature.objset.map((item) => {
                //         let dataObject = {};
                //         item.rec.forEach((data) => {
                //           dataObject[data.fldname] = data.fldval;
                //         });
                //         dataObjectgroup.push(dataObject);
                //       });
                //       resultData.push({
                //         layername: getFeatureParams.strlayername,
                //         data: dataObjectgroup,
                //       });
                //     }
                //   };
              });
          } catch (error) {
            console.error("获取图层特征时出错:", error);
          } finally {
            requestNum--;
            if (requestNum == 0) {
              this.keywords = [];
              let tableTemp = [];
              let queryParams = this.conditionQueryGroupList.map(
                (item, index) => {
                  if (index == 0) {
                    item.connector.queryValue = "";
                  }
                  return {
                    tableName: item.queryTableValue.queryValue,
                    attribute: item.attribute.queryValue,
                    operator: item.operator.queryValue,
                    value: item.value.queryValue,
                    connector: item.connector.queryValue,
                  };
                }
              );
              // let tableTemp =[];
              resultData.forEach((item) => {
                item.data.forEach((data) => {
                  this.keywords.push(data.keywords);
                  tableTemp.push({
                    type: data[this.calOnlyType.queryValue] || "未知",
                    data: data.SHAPE_LENG,
                  });
                });
              });
              if (queryParams.length > 0) {
                let params = {
                  conditions: queryParams,
                  keywordsList: this.keywords,
                  pageNum: this.advPageinfoItem.currentPage,
                  pageSize: 100,
                };
                await searchConditonQueryTemplate(params)
                  .then((res) => {
                    if (res.code == 200) {
                      this.conditonQueryData = res.data;
                      // this.$message.success("查询成功");
                      console.log(item, "统计结果1");
                      this.tableDataExport = res.data.map((item) => ({
                        ...item,
                      }));
                      this.advTableData = Object.entries(res.data).map(
                        ([cnname, equipmentNum]) => ({
                          cnname,
                          equipmentNum: parseFloat(equipmentNum).toFixed(2),
                        })
                      );
                      console.log("高级统计查询结果数据", this.advTableData);
                      // this.tableLoading = false;
                      res.data.forEach((item) => {
                        this.map.marker.addMarker(
                          Number(item.x),
                          Number(item.y),
                          this.querySpatialLayer,
                          {
                            scale: 1.5, //大小
                            radius: 5,
                            pBorderColor: "#000000",
                            pBorderWidth: 1,
                            pFillColor: "green",
                          },
                          item
                        );
                      });
                    }
                  })
                  .catch((err) => {});
              } else {
                console.log(tableTemp, "统计结果2");
                this.advTableData = tableTemp;
                // this.tableLoading = false;
              }
              let params;
              if (this.isPipeLineShow) {
                params = {
                  field: this.calOnlyType.queryValue,
                  lineResult: this.conditonQueryData,
                };
              } else {
                params = {
                  field: this.calOnlyType.queryValue,
                  equipResult: this.conditonQueryData,
                };
              }
              if (this.items.length != 0) {
                params.levels = this.items;
              }
              metricFields(params).then((res) => {
                if (res.code == 200) {
                  this.$message.success("数据获取成功");
                  if (params.field == "len") {
                    this.advTableData = [
                      {
                        cnname: "管线总长",
                        equipmentNum: (res.data / 1000).toFixed(3),
                      },
                    ];
                  } else {
                    this.advTableData = Object.keys(res.data).map((key) => {
                      const equipmentNum = res.data[key]; // 获取数量列的值

                      // 判断是否为整数
                      if (Number.isInteger(equipmentNum)) {
                        return {
                          cnname: key, // 类别列
                          equipmentNum: equipmentNum, // 如果是整数，直接返回
                        };
                      } else {
                        // 如果不是整数，保留三位小数
                        return {
                          cnname: key,
                          equipmentNum: parseFloat(equipmentNum).toFixed(3), // 转换为字符串并保留三位小数
                        };
                      }
                    });
                  }
                }
                this.tableLoading = false;
              });
            }
          }
        }
      }
      getFeatureByAreaSon.call(this);
    },
    async advGuideStep(type) {
      if (type == "del" && this.advGuideStage > 1) {
        this.advGuideStage--;
      } else if (type == "add" && this.advGuideStage < 5) {
        this.advGuideStage++;
      } else if (type == "finish") {
        this.tableLoading = true;
        this.advTableData = [];

        if (this.calOnlyType == "") {
          this.$message.warning("请选择统计类型");
          return;
        }
        if (this.selfCalArea == "1") {
          if (!this.geomData) {
            this.$message.warning("请绘制统计区域");
            return;
          }
          await this.getFeatureByAreaNew();
          this.advGuideStage++;
        } else {
          await this.getFeatureByAreaNew();
          this.advGuideStage++;
        }
        this.getTemplateParam();
        console.log("完成", this.conditonQueryData);

        // this.advGuideStage++;
      } else if (type == "cancel") {
        this.isAddDialog = false;
        this.advGuideStage = 1;
        this.selfCalArea = "0";
        this.calOnlyType = "";
        this.geomData = null;
        this.advTableData = [];
        this.keywords = [];
        this.targetQueryCondition.queryTableValue = {
          queryName: "",
          queryValue: "",
        };
      } else if (type == "save") {
        console.log("得到的表格", this.advTableData);

        this.showSetTemplateData = true;
      }
    },
    async saveTemplate() {
      let params = {
        conditions: [],
        templateName: this.templateData.name,
        templateRemark: this.templateData.note,
        keywordsList: this.keywords,
        // keywordsList:this.conditonQueryData,
        diameter: this.items,
        queryArea: this.areaText,
        field: this.calOnlyType.queryValue,
      };
      params.conditions = this.conditionQueryGroupList.map((item, index) => {
        if (index == 0) {
          item.connector.queryValue = "";
        }
        return {
          tableName: item.queryTableValue.queryValue,
          attribute: item.attribute.queryValue,
          operator: item.operator.queryValue,
          value: Number(item.value.queryValue),
          connector: item.connector.queryValue,
        };
      });
      saveStatisticTemplate(params).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
        }
      });
    },
    drawOperate(type) {
      this.map.interaction.cancelYjDraw();
      this.featureDrawType = type;
      switch (type) {
        case "circle":
          this.map.interaction.addNewAreaDraw("Circle", 1);
          break;
        case "rectangle":
          this.map.interaction.addNewAreaDraw("Rectangle", 1);
          break;
        case "multiPolygon":
          this.map.interaction.addNewAreaDraw("Polygon", 1);
          break;
        default:
          this.map.interaction.cancelYjDraw();
          this.geomData = null;
      }
      this.map.map.on("click", this.getFeatureByArea);
    },
    getFeatureByArea() {
      this.geomData = null;
      if (this.featureDrawType == "circle") {
        this.geomData = this.$store.state.circle;
      } else {
        this.geomData = this.$store.state.area.getCoordinates()[0];
      }
      this.map.map.un("dblclick", this.getFeatureByArea);
    },
    openAddDialog() {
      this.isAddDialog = true;
    },
    deleteTemplate() {
      deleteConditionTemplate({ id: this.templateConditionsId.id }).then(
        (res) => {
          if (res.code == 200) {
            this.$message({
              message: res.message,
              type: "success",
            });
          }
        }
      );
    },
    initMap() {
      setTimeout(() => {
        this.map = this.$store.getters.Map;
        if (this.map) {
        } else {
          console.error("地图实例未找到");
        }
        this.projectLayer = this.$store.getters.projectLayer;
        this.querySpatialLayer =
          this.map.layer.createVectorLayer("空间查询点图层");
      }, 1000); // 延迟 1000 毫秒（1秒）后执行
    },
    createLayer() {
      setTimeout(() => {
        this.polygonLayer = this.map.layer.createVectorLayer("polygonLayer");
        this.pointLayer = this.map.layer.createVectorLayer("pointLayer");
      }, 1000); // 延迟 1000 毫秒（1秒）后执行
    },
    changeMenu(val) {
      this.tableData = [];
      this.pageinfoItem = {
        totalItems: 0,
        currentPage: 1,
        pageSize: 100,
      };
      if (val == "normal") {
        this.targetAreaSelect();
        this.isNormalShow = true;
        this.isAdvancedShow = false;
        this.isShowAddNew = false;
      } else {
        (this.chartData = {
          xAxisData: [],
          seriesData: [],
        }),
          (this.isNormalShow = false);
        this.isAdvancedShow = true;
        this.isShowAddNew = true;
      }
    },
    showAllAdviceList() {},
    closeDialog() {
      // 通过修改 prop 来关闭弹窗
      this.$emit("update:dialogVisible", false);
    },
    // targetSelect() {
    //   ;
    // },
    // selectLine() {
    //   this.conditionType = "管线";
    // },
    // selectEquipment() {
    //   this.conditionType = "设备设施";
    // },
    openStatisicDialog() {
      this.dialogStatisicVisible = true;
    },
    refreshTemplate() {
      getStatisticListTemplate().then((res) => {
        this.templateGroup = res.data.map((item) => {
          return item; // 直接返回整个 item 对象
        });
      });
    },
    selectEquipment() {
      // this.targetAreaOption = "";
      this.tableData = [];
      let EquipmentDom = document.querySelector("#Tab-Equipment");
      let lineDom = document.querySelector("#Tab-Line");
      EquipmentDom.classList.remove("inactive-select-class");
      EquipmentDom.classList.add("active-select-class");
      lineDom.classList.remove("active-select-class");
      lineDom.classList.add("inactive-select-class");
      this.type = "Equipment";
      this.targetAreaSelect();
    },
    selectLine() {
      // this.targetAreaOption = "";
      this.tableData = [];
      let EquipmentDom = document.querySelector("#Tab-Equipment");
      let lineDom = document.querySelector("#Tab-Line");
      lineDom.classList.remove("inactive-select-class");
      lineDom.classList.add("active-select-class");
      EquipmentDom.classList.remove("active-select-class");
      EquipmentDom.classList.add("inactive-select-class");
      this.type = "Line";
      this.targetAreaSelect();
    },
    targetAreaSelect() {
      // if(this.type == "Line"){
      //     if(this.targetAreaOption == "allArea"){
      //         // 全部区域的管线

      //     }
      // }else{
      //     if(this.targetAreaOption == "allArea"){
      //         // 全部区域的设备设施
      //     }
      // }
      (this.chartData = {
        xAxisData: [],
        seriesData: [],
      }),
        getStasiticResult(this.type, this.targetAreaOption).then((res) => {
          this.tableData = res.data;
          let lens = 0;
          this.tableData.forEach((item) => {
            if (item.totalLength) {
              lens += Number(item.totalLength);
            }
          });
          if (Number(lens)) {
            this.tableData.push({
              cnname: "管线总长",
              totalLength: lens.toFixed(2),
            });
          }

          this.tableData.forEach((item) => {
            this.chartData.xAxisData.push(item.cnname);
            this.chartData.seriesData.push(
              item.totalLength || parseFloat(item.equipmentNum).toFixed(2)
            );
          });
        });
    },
  },

  mounted() {
    this.initMap();
    getConditionQueryList().then((res) => {
      this.conditionQueryTableList = res.data;
    });
    getStatisticListTemplate().then((res) => {
      this.templateGroup = res.data.map((item) => {
        return item; // 直接返回整个 item 对象
      });
    });
    this.targetAreaSelect();
  },
};
</script>

<style lang="scss" scoped>
// 定义变量
$primary-color: #007bff;
$secondary-color: #f0f0f0;
$border-color: #ccc;

// 定义混入
@mixin button-style {
  padding: 5px;
  border: none;
  background-color: $primary-color;
  color: white;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

::v-deep .vue-treeselect {
  color: #000;
  margin: 0.4rem auto;
  width: 98%;
  .vue-treeselect__control {
    height: 1.8rem;
    font-size: 1rem;
    line-height: 1.8rem;
    border-radius: 3px;
  }
  .vue-treeselect__placeholder {
    top: -4px;
  }
}
::v-deep .el-checkbox {
  color: white;
}
.advanceGuideDialog {
  position: absolute;
  width: 20rem;
  height: 20rem;
  top: 9rem;
  left: -21rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 999;
  border: 3px solid rgba(0, 0, 0, 0.4);
  .title {
    width: 100%;
    height: 10%;
    color: #000;
    text-align: left;
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    .icon {
      cursor: pointer;
    }
    .icon:hover {
      color: #4998f2;
    }
  }
  .content {
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    .stage1 {
      height: 90%;
      width: 100%;
      display: flex;
      flex-direction: column;
      color: #3d6f9f;
      border-bottom: 1px solid #ccc;
      .stageTitle {
        font-size: 1.2rem;
        font-weight: 600;
        color: #3d6f9f;
        margin: 1.5rem 0px;
      }
      .el-radio {
        margin: 1rem 0px;
        margin-left: 6rem;

        width: 50%;
        text-align: left;
      }
      .featureChoose {
        display: flex;
        flex-direction: row;
        margin-left: 7rem;
        .item {
          margin: 0 0.5rem;
          cursor: pointer;
          img {
            height: 2rem;
          }
        }
        .item:hover {
          background: #ebebeb;
        }
      }
    }
    .stage2 {
      height: 90%;
      width: 100%;
      display: flex;
      flex-direction: column;
      color: #3d6f9f;
      border-bottom: 1px solid #ccc;
      .stageTitle {
        font-size: 1.2rem;
        font-weight: 600;
        color: #3d6f9f;
        margin: 0.5rem 0px;
      }
      .condition {
        display: flex;
        justify-content: space-around;
        select {
          border: 1px solid #ddd;
        }
        input {
          border: 1px solid #ddd;
        }
      }
      .conditionSelect {
        width: 100%;
        max-height: 50%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        .item {
          display: flex;
          justify-content: space-between;
        }
      }
    }
    .stage3 {
      height: 90%;
      width: 100%;
      display: flex;
      flex-direction: column;
      color: #3d6f9f;
      border-bottom: 1px solid #ccc;
      .stageTitle {
        font-size: 1.2rem;
        font-weight: 600;
        color: #3d6f9f;
        margin: 0.5rem 1rem;
        text-align: left;
      }
      .tipContent {
        margin-bottom: 20px;

        .box {
          border: 1px solid $border-color;
          padding: 10px;
          border-radius: 5px;
          height: 100%;
          .row {
            display: flex;
            align-items: center;
            margin-bottom: 10px;

            .label {
              margin-right: 10px;
              font-weight: bold;
            }

            .input-box {
              margin-right: 10px;
              padding: 5px;
              width: 150px;
              border: 1px solid $border-color;
              border-radius: 5px;
            }

            .add-button,
            .remove-button {
              @include button-style;
            }

            .content-box {
              border: 1px solid #ccc;
              display: flex;
              flex-direction: column;
              align-items: space;
              width: 75%;
              height: 90px;
              overflow: auto;
              .content-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 10px;
                border-bottom: 1px solid black;
                span {
                  margin-right: 10px;
                  font-size: 14px;
                }

                .remove-button {
                  padding: 5px;
                  border: none;
                  background-color: #ff4d4f;
                  color: white;
                  border-radius: 5px;
                  cursor: pointer;

                  &:hover {
                    background-color: darken(#ff4d4f, 10%);
                  }
                }
              }
            }
          }
        }
      }
      select {
        width: 80%;
        margin-left: 10%;
      }
    }
    .stage4 {
      height: 90%;
      width: 100%;
      display: flex;
      flex-direction: column;
      color: #3d6f9f;
      border-bottom: 1px solid #ccc;
    }
    .btnGroup {
      height: 10%;
      // border-top: 1px solid #000;
      button {
        cursor: pointer;
        margin: 0 0.2rem;
        margin-top: 0.2rem;
      }
    }
  }
  ::v-deep .el-input {
    .el-input__inner {
      height: 1.5rem;
    }
    .el-input__icon {
      line-height: 1.5rem;
    }
  }
}

.statisticDialogContainer {
  width: 25vw;
  color: white;
  position: absolute;
  top: 5vh;
  right: -19vw;
  height: 46vh;
  z-index: 2;
  .statisticDialogTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 1rem;
    background-color: #285383;
    .title-left,
    .title-right {
      display: flex;
      align-items: center;
    }
    .bar {
      width: 5px; /* 小竖条的宽度 */
      height: 20px; /* 小竖条的高度 */
      background-color: white; /* 小竖条的颜色 */
      margin-right: 10px; /* 小竖条和文字之间的间距 */
    }
    .icon {
      width: 20px; /* 小方框的宽度 */
      height: 20px; /* 小方框的高度 */
      // border: 1px solid #4998f2; /* 小方框的边框 */
      margin-left: 5px; /* 小方框之间的间距 */
    }
    .icon:hover {
      color: #4998f2;
    }
    .icon:focus {
      color: #4998f2;
    }
  }
  .statisticDialogContent {
    padding: 10px;
    display: flex;
    flex-direction: column;
    background-color: #285383;
    font-size: 0.8rem;
    .contentButton {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px; /* 与下半部分内容的间距 */
      .menuButton {
        width: 50%;
        text-align: center;
      }
      .menuButton.active {
        // color: rgb(8, 46, 82);
        border-bottom: 2px solid white;
      }
    }
    .contentBox {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      .formRow {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .search_input {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          input {
            width: 80%;
          }
        }
      }
      .formRow1 {
        background-color: #4070a2;
        .search_label {
        }
        .showAllList {
          margin-left: 15vw;
        }
      }
      .formRowPoint {
        display: flex;
        .columnLabel {
          display: flex;
          flex-direction: column;
          .label {
            display: flex;
            font-size: 16px;
            .label_text {
              width: 100px;
              margin-right: 10px;
            }
            .coordinate-input {
              margin-left: 88px;
            }
          }
        }
      }
      .formTable {
        table {
          border-collapse: collapse;
          border: 1px solid white;
          width: 23vw;
          height: 30vh;
          overflow: auto;
          .table-cell {
            height: 5vh;
          }
          .table-row {
            display: table-row;
          }
        }

        table tbody tr {
          border: 1px solid white;
        }

        table td {
          overflow: auto;
          line-height: 5vh;
        }
      }
      .label {
        width: 100px;
        margin-right: 10px;
      }
      .control {
        flex-grow: 1;
        .pickup-btn {
          width: 20%;
          margin-left: 1rem;
        }
        .pickup-btn1 {
          margin-left: 12.3rem;
        }
        .smallBtn {
          width: 4.5rem;
          margin-left: 88px;
        }
        .data-container {
          display: flex;
          justify-content: space-between;
          background-color: #4070a2;
          border-bottom: 1px solid white;
        }
        .data-container:hover {
          background-color: #03366c;
        }
      }

      select,
      textarea,
      button {
        width: 100%;
        color: white !important;
        background-color: #4070a2;
        border: none; /* 去除边框 */
        outline: none; /* 去除焦点时的轮廓线 */
        font-size: 0.8rem;
        height: 1.5rem;
      }

      button {
        margin-right: 10px; /* 按钮之间的间距 */
      }
      button:hover {
        background-color: #4998f2;
      }
      button:focus {
        background-color: #4998f2;
      }
      textarea {
        height: 5rem;
      }

      /* 最后一行的按钮不需要 label，可以单独设置样式 */
      .formRow:last-child {
        justify-content: flex-end;
      }

      .formRow:last-child .button {
        margin-left: 10px; /* 按钮之间的间距，而不是右边距 */
      }
    }
  }
}
.setTemplateData {
  height: 8rem;
  position: absolute;
  bottom: -10rem;
  left: -17rem;
  display: flex;
  flex-direction: column;
  color: #000;
  background: #fff;
  // padding: 2rem;
  border: 1px solid;
  input {
    width: 15rem;
  }
  button {
    width: 4rem;
    height: 1.5rem;
    margin: 0.5rem;
  }
}
.active-select-class {
  background-color: #c4c6c8 !important;
}

.inactive-select-class {
  background-color: #fff !important;
}
.tablePage {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: center;
  ::v-deep .el-pagination {
    button {
      color: #fff;
      background: transparent;
      border: 1px solid #ccc !important;
      border-radius: 5px;
    }
    .el-pagination__jump {
      color: #fff;
      background: transparent;
    }
    .el-input__inner {
      background: transparent;
      color: #fff;
    }
  }
  ::v-deep .el-pagination__total {
    color: #fff;
  }
  ::v-deep .el-pager {
    color: #fff;
    .number {
      margin: 0 0.3vw;
      background: transparent;
      border: 1px solid #ccc !important;
      border-radius: 5px;
    }

    .btn-quickprev {
      background: transparent;
      border: 1px solid #ccc !important;
      border-radius: 5px;
      color: #fff;
    }
    .btn-quicknext {
      background: transparent;
      border: 1px solid #ccc !important;
      border-radius: 5px;
      color: #fff;
    }
  }
}
</style>
